<template>
  <div class="evaluation">
    <stu-breadcrumb style="width: 96%;margin: 10px auto;" />
    <div class="evaluation_bor">
      <div class="evaluation_main">
        <div class="eval_setion_top">
          <div class="eval_setion" style="flex: 0.8;">
            <p class="eval_title">综合能力</p>
            <!-- 综合能力 -->
            <SynthesizeAbility />
          </div>
          <div class="eval_setion" style="flex: 1.4;margin: 0 10px;">
            <!-- 综合得分 -->
            <CompositeScore :ScoreAll="ScoreAll" />
          </div>
          <div class="eval_setion " style="flex: 0.8;">
            <p class="eval_title">打卡记录</p>
            <!-- 打卡记录 -->
            <PunshRecord :mydaylist="mydaylist" />
          </div>
        </div>
        <div class="eval_setion_top">
          <div class="eval_setion">
            <p class="eval_title">得分明细</p>
            <!-- 得分明细 -->
            <ScoreBreakdown />
          </div>
          <div class="eval_setion" style="flex: 1.5;">
            <p class="eval_title">班级模块排名</p>
            <!-- 模块排名 -->
            <ModelRanking @ShowDetails="ShowDetails" />
          </div>
        </div>
      </div>
    </div>
    <!-- 班级模块查看详情 -->
    <el-dialog v-model="ModelDetails" :close-on-click-modal="false">
      <template #header>
        <h2 style="text-align: center;">{{ IDtitle }}</h2>
      </template>
      <el-scrollbar height="470px">
        <div v-html="lDetailsHtml"></div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useComponent } from "./component/hooks"
import CompositeScore from "./component/CompositeScore.vue";
import SynthesizeAbility from './component/SynthesizeAbility.vue';
import StuBreadcrumb from "@/components/StuBreadcrumb/index.vue";
import ScoreBreakdown from './component/ScoreBreakdown.vue';
import ModelRanking from './component/ModelRanking.vue';
import PunshRecord from './component/PunshRecord.vue';
const {
  IDtitle,
  ScoreAll,
  mydaylist,
  ModelDetails,
  lDetailsHtml,
  ShowDetails
} = useComponent();
</script>

<style scoped lang="scss">
.evaluation {
  padding-top: 70px;
  background: #f2f5fa;
  height: 100vh;
  user-select: none;

  .evaluation_bor {
    width: 100%;
    margin: 0 auto;
    height: calc(100% - 65px);
    padding: 15px;
    position: relative;

    .evaluation_main {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 98%;
      height: 98%;
      margin: auto;
    }
  }

  :deep(.el-calendar__body) {
    padding: 0;
  }

  :deep(.el-calendar-table td) {
    border: none;
  }

  .eval_setion_top {
    height: 49%;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .eval_setion {
      flex: 1;
      width: 50%;
      height: 100%;
      background: url(@/assets/studen/images/eval_bag.png) no-repeat;
      background-position: center;
      background-size: 100% 100%;
      padding: 5px;
    }

    .eval_title {
      height: 38px;
      background: url(@/assets/studen/images/eval_title.png) no-repeat;
      background-size: 100% 100%;
      color: #335FA6;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 5%;
    }
  }

  .eval_setion_top+.eval_setion_top {
    margin-top: 10px;
  }

}
</style>
